import React, { useEffect, useState } from 'react'
import '../style/good.css'
import { RightOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { Image } from 'react-vant';
import { getShop } from '../../../api/yjr/yjr_api'

export default React.memo(function GoodRecommend() {
  const navigate = useNavigate()
  const goIntegral = () => {
    navigate('/integral')
  }

  // 定义一个接口ShopData，用于描述商店数据的结构
  interface ShopData {
    _id: string, // 商店的唯一标识符
    title: string, // 商店标题
    integral: number, // 商店积分
    image: string, // 商店图片URL
    detail_image: string, // 商店详情图片URL
    like: number, // 商店点赞数
    follow: number, // 商店关注数
    shop_type: string // 商店类型
    freight: number, // 商店运费
  }

  const [shop, setShop] = useState<ShopData[]>([])
  const getShopData = async () => {
    const res = await getShop()
    // setShop(res.data.shopData)
    let resData = res.data.shopData.slice(0, 3)
    if (resData.length > 3) {
      setShop(resData)
    } else {
      setShop(resData)
    }
  }

  const handleOrder = (id: string) => {
    navigate(`/order/${id}`)
  }

  const handleDetail = (id: string) => {
    navigate(`/details/${id}`)
  }

  useEffect(() => {
    getShopData()
  }, [])

  return (
    <div className='goodRecommendTitle'>
      <div className='left'>
        <h1 className='h111'>
          <span>好物推荐</span>
          <span style={{ color: '#818181', height: '3rem', lineHeight: '3rem' }}>
            <span style={{ fontSize: '1.4rem' }} onClick={goIntegral}>更多</span>
            <RightOutline style={{ fontSize: '1.4rem' }} />
          </span>
        </h1>
        <div className='shop'>
          {
            shop.map(item => {
              return (
                <div key={item._id}>
                  <div className='goodRecommendImg' onClick={() => handleDetail(item._id)}>
                    <div className='divImg'>
                      <Image lazyload src={item.image} />
                    </div>
                    <h2 style={{ fontWeight: 'inherit' }}>{item.title}</h2>
                    <h2 style={{ color: 'red', fontWeight: 'inherit' }}>{item.integral}积分</h2>
                  </div>
                  <button className='btn' onClick={() => handleOrder(item._id)}>兑换</button>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
})
